<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=robots content="noodp"><meta http-equiv=x-ua-compatible content="IE=edge, chrome=1"><title>Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章 - Yulin Lewis' Blog</title><meta name=keywords content="雨临Lewis,Java,hugo,hexo,博客"><meta name=Description content="不想当写手的码农不是好咸鱼_(xз」∠)_"><meta property="og:title" content="Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta property="og:description" content="前言
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：


1
2
3


hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10


请注意，本文的所有功能都离不开两个新增加的文件：_custom.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入。
另外本文篇幅太长，阅读体验不好，将其进行分章如下：

Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章
Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章
Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta property="og:type" content="article"><meta property="og:url" content="https://lewky.cn/posts/hugo-3-3/"><meta property="og:image" content="https://lewky.cn/logo.png"><meta property="article:published_time" content="2021-08-24T15:11:16+08:00"><meta property="article:modified_time" content="2022-02-12T15:11:16+08:00"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://lewky.cn/logo.png"><meta name=twitter:title content="Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta name=twitter:description content="前言
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：


1
2
3


hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10


请注意，本文的所有功能都离不开两个新增加的文件：_custom.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入。
另外本文篇幅太长，阅读体验不好，将其进行分章如下：

Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章
Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章
Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta name=application-name content="雨临Lewis的博客"><meta name=apple-mobile-web-app-title content="雨临Lewis的博客"><meta name=theme-color content="#ffffff"><meta name=msapplication-TileColor content="#da532c"><link rel="shortcut icon" type=image/x-icon href=/favicon.ico><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link rel=manifest href=/site.webmanifest><link rel=canonical href=https://lewky.cn/posts/hugo-3-3/><link rel=prev href=https://lewky.cn/posts/springboot-issues/><link rel=next href=https://lewky.cn/posts/es-issues/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css><link rel=stylesheet href=/css/style.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css><script type=application/ld+json>{"@context":"http://schema.org","@type":"BlogPosting","headline":"Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章","inLanguage":"","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/lewky.cn\/posts\/hugo-3-3\/"},"genre":"posts","keywords":"Hugo, LoveIt主题, 主题美化, 功能增强","wordcount":2436,"url":"https:\/\/lewky.cn\/posts\/hugo-3-3\/","datePublished":"2021-08-24T15:11:16+08:00","dateModified":"2022-02-12T15:11:16+08:00","license":"This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher":{"@type":"Organization","name":"雨临Lewis","logo":"https:\/\/lewky.cn\/images\/avatar.jpg"},"author":{"@type":"Person","name":"雨临Lewis"},"description":""}</script></head><body header-desktop=fixed header-mobile=auto><script type=text/javascript>(window.localStorage&&localStorage.getItem('theme')?localStorage.getItem('theme')==='dark':('auto'==='auto'?window.matchMedia('(prefers-color-scheme: dark)').matches:'auto'==='dark'))&&document.body.setAttribute('theme','dark');</script><div id=mask></div><div class=wrapper><header class=desktop id=header-desktop><div class=header-wrapper><a href=https://github.com/lewky class=github-corner target=_blank title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="3.5rem" height="3.5rem" viewBox="0 0 250 250" style="fill:#70b7fd;color:#fff;position:absolute;top:0;border:0;left:0;transform:scale(-1,1)" aria-hidden="true"><path d="M0 0 115 115h15l12 27L250 250V0z"/><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentcolor" style="transform-origin:130px 106px" class="octo-arm"/><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8z" fill="currentcolor" class="octo-body"/></svg></a><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu><div class=menu-inner><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索
</a><span class="menu-item delimiter"></span><a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></div></header><header class=mobile id=header-mobile><div class=header-container><div class=header-wrapper><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu-toggle id=menu-toggle-mobile><span></span><span></span><span></span></div></div><div class=menu id=menu-mobile><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索</a>
<a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></header><div class="search-dropdown desktop"><div id=search-dropdown-desktop></div></div><div class="search-dropdown mobile"><div id=search-dropdown-mobile></div></div><main class=main><div class=container><div class=toc id=toc-auto><h2 class=toc-title>目录</h2><div class=toc-content id=toc-content-auto></div></div><article class="page single"><h1 class="single-title animated flipInX">Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章</h1><div class=post-meta><div class=post-meta-line><span class=post-author><a href=/ title=Author rel=author class=author><i class="fas fa-user-circle fa-fw"></i>雨临Lewis</a></span>&nbsp;<span class=post-category>收录于 <a href=/categories/hugo%E7%B3%BB%E5%88%97/><i class="far fa-folder fa-fw"></i>Hugo系列</a></span></div><div class=post-meta-line><i class="far fa-calendar fa-fw"></i>&nbsp;<time datetime=2021-08-24>2021-08-24</time>&nbsp;<i class="far fa-calendar-plus fa-fw"></i>&nbsp;<time datetime=2022-02-12>2022-02-12</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 2436 字
<i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 5 分钟&nbsp;<span id=/posts/hugo-3-3/ class=leancloud_visitors data-flag-title="Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章">
<i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;次阅读
</span>&nbsp;
<a href=#comments id=post-meta-vcount title=查看评论><i class="fas fa-comment fa-fw"></i>&nbsp;<span id=/posts/hugo-3-3/ class=waline-comment-count></span>&nbsp;条评论</a></div></div><div class="details toc" id=toc-static kept><div class="details-summary toc-title"><span>目录</span>
<span><i class="details-icon fas fa-angle-right"></i></span></div><div class="details-content toc-content" id=toc-content-static><nav id=TableOfContents><ol><li><a href=#前言>前言</a></li><li><a href=#显示最近更新的十篇文章>显示最近更新的十篇文章</a></li><li><a href=#添加抓住猫咪小游戏>添加抓住猫咪小游戏</a></li><li><a href=#添加鼠标点击文字特效>添加鼠标点击文字特效</a></li><li><a href=#参考链接>参考链接</a></li></ol></nav></div></div><div class=content id=content><h2 id=前言>前言</h2><p>本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10
</code></pre></td></tr></table></div></div><p><strong>请注意，本文的所有功能都离不开两个新增加的文件：<code>_custom.scss</code>和<code>custom.js</code>，部分功能还需要<code>jquery</code>，在第一章中会提及如何引入。</strong></p><p>另外本文篇幅太长，阅读体验不好，将其进行分章如下：</p><ul><li><a href=/posts/hugo-3.html/ rel>Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章</a></li><li><a href=/posts/hugo-3.1.html/ rel>Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章</a></li><li><a href=/posts/hugo-3.2.html/ rel>Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章</a></li><li><a href=/posts/hugo-3-3/ rel>Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章</a></li></ul><h2 id=显示最近更新的十篇文章>显示最近更新的十篇文章</h2><p>在归档页面只能看到所有以创建时间递减排序的文章列表，可以用下面的方法在归档页面开头增添十篇最近更新的文章。</p><p>首先在配置文件<code>config.toml</code>中添加新的变量：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>  [params.section]
    # 显示最近更新文章的数量
    lastUpdatedSize = 15
</code></pre></td></tr></table></div></div><p>接着将<code>/themes/LoveIt/layouts/_default/section.html</code>拷贝到<code>/layouts/_default/section.html</code>，打开拷贝后的文件，找到如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- /* Paginate */ -}}
</code></pre></td></tr></table></div></div><p>在这行代码的上方位置插入下面的代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- /* Last Modified */ -}}
{{- $lastUpdatedSize := .Site.Params.section.lastUpdatedSize -}}
{{- if $lastUpdatedSize -}}
	{{- if .Pages -}}
		{{- $pages := .Pages.ByLastmod.Reverse -}}
		&lt;h3 class=&#34;group-title&#34;&gt;最近更新 &lt;sup&gt;{{- $lastUpdatedSize -}}&lt;/sup&gt;&lt;/h3&gt;
		{{- range first $lastUpdatedSize $pages -}}
			&lt;article class=&#34;archive-item&#34;&gt;
				&lt;a href=&#34;{{ .RelPermalink }}&#34; class=&#34;archive-item-link&#34;&gt;
					{{- .Title -}}
				&lt;/a&gt;
				&lt;span class=&#34;archive-item-date2&#34;&gt;
					{{- &#34;2006-01-02&#34; | .Lastmod.Format -}}
				&lt;/span&gt;
			&lt;/article&gt;
		{{- end -}}
	{{- end -}}
{{- end -}}
</code></pre></td></tr></table></div></div><p>然后在<code>/assets/css/_custom.scss</code>中添加如下样式代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=p>.</span><span class=nc>archive-item-date2</span> <span class=p>{</span>
    <span class=k>color</span><span class=p>:</span> <span class=mh>#a9a9b3</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></td></tr></table></div></div><p>同时为了方便区分开创建时间和最近更新时间，在每篇文章中也新增了最近更新时间这个meta。将<code>/themes/LoveIt/layouts/posts/single.html</code>拷贝到<code>/layouts/posts/single.html</code>，打开拷贝后的文件，找到如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- with .Site.Params.dateformat | default &#34;2006-01-02&#34; | .PublishDate.Format -}}
    &lt;i class=&#34;far fa-calendar-alt fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;time datetime=&#34;{{ . }}&#34;&gt;{{ . }}&lt;/time&gt;&amp;nbsp;
{{- end -}}
</code></pre></td></tr></table></div></div><p>将上面的代码改为如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- with .Site.Params.dateformat | default &#34;2006-01-02&#34; | .PublishDate.Format -}}
    &lt;i class=&#34;far fa-calendar fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;time datetime=&#34;{{ . }}&#34;&gt;{{ . }}&lt;/time&gt;&amp;nbsp;
{{- end -}}
{{- with .Site.Params.dateformat | default &#34;2006-01-02&#34; | .Lastmod.Format -}}
    &lt;i class=&#34;far fa-calendar-plus fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;time datetime=&#34;{{ . }}&#34;&gt;{{ . }}&lt;/time&gt;&amp;nbsp;
{{- end -}}
</code></pre></td></tr></table></div></div><h2 id=添加抓住猫咪小游戏>添加抓住猫咪小游戏</h2><p>在站点的<code>content</code>目录下新建一个文件夹，文件夹名字将被作为一个页面URL，然后在该文件夹下新建一个<code>index.md</code>文件，内容如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>---
title: &#39;逮住那只猫!&#39;
---
## 游戏规则

1. 点击小圆点，围住小猫。
2. 你点击一次，小猫走一次。
3. 直到你把小猫围住（赢），或者小猫走到边界并逃跑（输）。

---

&lt;div align=&#34;center&#34;&gt;
  &lt;div id=&#34;catch-the-cat&#34;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script src=&#34;//cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/phaser.min.js&#34;&gt;&lt;/script&gt;
&lt;script src=&#34;//cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/catch-the-cat.js&#34;&gt;&lt;/script&gt;
&lt;script defer=&#34;defer&#34; src=&#34;//cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/game.js&#34;&gt;&lt;/script&gt;
</code></pre></td></tr></table></div></div><p>如果文件夹命名为<code>catch-the-cat</code>，则可以通过<code>&lt;你的站点地址>/catch-the-cat/</code>来访问到这个抓住猫咪的游戏页面。</p><p>上述index.md中引入的JavaScript文件，可以下载下来放到你的站点或者其他地方，然后在index.md中改成对应的地址。</p><h2 id=添加鼠标点击文字特效>添加鼠标点击文字特效</h2><p>在custom.js中添加如下代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span><span class=lnt>34
</span><span class=lnt>35
</span><span class=lnt>36
</span><span class=lnt>37
</span><span class=lnt>38
</span><span class=lnt>39
</span><span class=lnt>40
</span><span class=lnt>41
</span><span class=lnt>42
</span><span class=lnt>43
</span><span class=lnt>44
</span><span class=lnt>45
</span><span class=lnt>46
</span><span class=lnt>47
</span><span class=lnt>48
</span><span class=lnt>49
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>/* 鼠标点击文字特效 */
var a_idx = 0;
var a_click = 1;
var a = new Array(&#34;富强&#34;, &#34;民主&#34;, &#34;文明&#34;, &#34;和谐&#34;, &#34;自由&#34;, &#34;平等&#34;, &#34;公正&#34; ,&#34;法治&#34;, &#34;爱国&#34;, &#34;敬业&#34;, &#34;诚信&#34;, &#34;友善&#34;,
			&#34;老哥稳&#34;, &#34;带我飞&#34;, &#34;厉害了word哥&#34;, &#34;扎心了老铁&#34;, &#34;蓝瘦香菇&#34;, &#34;还有这种操作?&#34;, &#34;就是有这种操作&#34;,
			&#34;皮皮虾我们走&#34;, &#34;笑到猪叫&#34;, &#34;石乐志&#34;, &#34;不存在的&#34;, &#34;黑车!&#34;, &#34;我要下车!&#34;, &#34;他还只是个孩子&#34;, &#34;请不要放过他&#34;,
			&#34;惊不惊喜?&#34;, &#34;意不意外?&#34;, &#34;我有一个大胆的想法&#34;, &#34;你的良心不会痛吗&#34;, &#34;你心里就没点b数吗&#34;, &#34;没有,我很膨胀&#34;,
			&#34;秀&#34;, &#34;天秀&#34;, &#34;陈独秀&#34;, &#34;蒂花之秀&#34;, &#34;造化钟神秀&#34;, &#34;我去买几个橘子&#34;, &#34;你就站在此地&#34;, &#34;不要走动&#34;,
			&#34;我可能读了假书&#34;, &#34;贫穷限制了我的想象力&#34;, &#34;打call&#34;, &#34;当然是选择原谅她啊&#34;, &#34;你有freestyle吗&#34;,
			&#34;北大还行撒贝宁&#34;, &#34;不知妻美刘强东&#34;, &#34;悔创阿里杰克马&#34;, &#34;一无所有王健林&#34;, &#34;普通家庭马化腾&#34;,
			&#34;别点了&#34;, &#34;求求你别点了&#34;, &#34;你还点&#34;, &#34;你再点!&#34;, &#34;有本事继续点!&#34;, &#34;你厉害&#34;, &#34;我投翔&#34;,
			&#34;w(·Д·)w&#34;, &#34;(#`O′)&#34;, &#34;（/TДT)/&#34;, &#34;┭┮﹏┭┮&#34;, &#34;_(:3」∠)_&#34;);
jQuery(document).ready(function($) {
    $(&#34;body&#34;).click(function(e) {
		/* 点击频率，点击几次就换文字 */
		var frequency = 2;
		if (a_click % frequency === 0) {
			
			var $i = $(&#34;&lt;span/&gt;&#34;).text(a[a_idx]);
			a_idx = (a_idx + 1) % a.length;
			var x = e.pageX,
			y = e.pageY;
			$i.css({
				&#34;z-index&#34;: 9999,
				&#34;top&#34;: y - 20,
				&#34;left&#34;: x,
				&#34;position&#34;: &#34;absolute&#34;,
				&#34;font-weight&#34;: &#34;bold&#34;,
				&#34;color&#34;: randomColor(),
				&#34;-webkit-user-select&#34;: &#34;none&#34;,
				&#34;-moz-user-select&#34;: &#34;none&#34;,
				&#34;-ms-user-select&#34;: &#34;none&#34;,
				&#34;user-select&#34;: &#34;none&#34;
			});
			$(&#34;body&#34;).append($i);
			$i.animate({
				&#34;top&#34;: y - 180,
				&#34;opacity&#34;: 0
			},
			1500,
			function() {
				$i.remove();
			});
			
		}
	a_click ++;
		
    });
});
</code></pre></td></tr></table></div></div><h2 id=参考链接>参考链接</h2><ul><li><a href=https://gohugo.io/templates/lists/ target=_blank rel="noopener noreffer">Lists of Content in Hugo</a></li></ul><div class=post-reward><input type=checkbox name=reward id=reward hidden>
<label class=reward-button for=reward>赞赏支持</label><div class=qr-code><label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/wechat.png>
<span>微信打赏</span></label>
<label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/alipay.png>
<span>支付宝打赏</span></label></div></div></div><div class=post-footer id=post-footer><div class=post-info><div class=post-info-line><div class=post-info-mod><span>更新于 2022-02-12</span></div><div class=post-info-license><span><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span></div></div><div class=post-info-line><div class=post-info-md><span><a class=link-to-markdown href=/posts/hugo-3-3/index.md target=_blank>阅读原始文档</a></span></div><div class=post-info-share><span><a href=javascript:void(0); title="分享到 Twitter" data-sharer=twitter data-url=https://lewky.cn/posts/hugo-3-3/ data-title="Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章" data-hashtags=Hugo,LoveIt主题,主题美化,功能增强><i class="fab fa-twitter fa-fw"></i></a><a href=javascript:void(0); title="分享到 Facebook" data-sharer=facebook data-url=https://lewky.cn/posts/hugo-3-3/ data-hashtag=Hugo><i class="fab fa-facebook-square fa-fw"></i></a><a href=javascript:void(0); title="分享到 Hacker News" data-sharer=hackernews data-url=https://lewky.cn/posts/hugo-3-3/ data-title="Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><i class="fab fa-hacker-news fa-fw"></i></a><a href=javascript:void(0); title="分享到 Line" data-sharer=line data-url=https://lewky.cn/posts/hugo-3-3/ data-title="Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><i data-svg-src=https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg></i></a><a href=javascript:void(0); title="分享到 微博" data-sharer=weibo data-url=https://lewky.cn/posts/hugo-3-3/ data-title="Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><i class="fab fa-weibo fa-fw"></i></a></span></div></div></div><div class=post-info-more><section class=post-tags><i class="fas fa-tags fa-fw"></i>&nbsp;<a href=/tags/hugo/>Hugo</a>,&nbsp;<a href=/tags/loveit%E4%B8%BB%E9%A2%98/>LoveIt主题</a>,&nbsp;<a href=/tags/%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/>主题美化</a>,&nbsp;<a href=/tags/%E5%8A%9F%E8%83%BD%E5%A2%9E%E5%BC%BA/>功能增强</a></section><section><span><a href=javascript:void(0); onclick=window.history.back();>返回</a></span>&nbsp;|&nbsp;<span><a href=/>主页</a></span></section></div><div class=post-nav><a href=/posts/springboot-issues/ class=prev rel=prev title=SpringBoot问题汇总><i class="fas fa-angle-left fa-fw"></i>SpringBoot问题汇总</a>
<a href=/posts/es-issues/ class=next rel=next title=Elasticsearch问题汇总>Elasticsearch问题汇总<i class="fas fa-angle-right fa-fw"></i></a></div></div><div id=comments><div id=waline></div><script src=https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js></script><script>new Waline({el:'#waline',meta:["nick","mail","link"],requiredMeta:["nick","mail"],login:"force",placeholder:"为防恶意灌水攻击，评论前需注册并登录，望见谅~",serverURL:"https://comment.lewky.cn/",avatarCDN:"https://sdn.geekzu.org/avatar/",pageSize:20,avatar:"retro",lang:"zh-CN",visitor:true,highlight:true,uploadImage:false,emoji:['https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/嘉然今天吃什么','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/大航海嘉然','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/向晚大魔王','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/贝拉kira','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/珈乐Carol','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/乃琳Queen','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/EveOneCat','https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/滑稽','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/default']});</script></div></article></div></main><footer class=footer><div class=footer-container><div class=footer-line><span id=run-time></span>|
<a href=http://rssblog.vercel.app/ target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i>&nbsp;RSSBlog</a></div><div class=footer-line><i class="far fa-copyright fa-fw"></i><span itemprop=copyrightYear>2018 - 2022</span><span class=author itemprop=copyrightHolder>&nbsp;<a href=/ target=_blank>雨临Lewis</a></span>&nbsp;|&nbsp;<span class=license><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span><span class=icp-splitter>&nbsp;|&nbsp;</span><br class=icp-br><span class=icp><a target=_blank href=http://www.beian.miit.gov.cn/ style=font-weight:700>粤ICP备19103822</a></span></div></div></footer></div><div id=fixed-buttons><a href=# id=back-to-top class=fixed-button title=回到顶部><i class="fas fa-arrow-up fa-fw"></i></a><a href=# id=view-comments class=fixed-button title=查看评论><i class="fas fa-comment fa-fw"></i></a></div><div class=sidebar_wo><div id=leimu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuA.png'" title=回到顶部></div><div class=sidebar_wo id=lamu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuA.png'" title=回到底部></div></div><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/css/lightgallery.min.css><script type=text/javascript src=https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/js/lightgallery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-zoom.js@1.2.0/dist/lg-zoom.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js></script><script type=text/javascript>window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":30},"comment":{},"lightGallery":{"actualSize":false,"exThumbImage":"data-thumbnail","hideBarsDelay":2000,"selector":".lightgallery","speed":400,"thumbContHeight":80,"thumbWidth":80,"thumbnail":true}};</script><script type=text/javascript src=/js/theme.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js></script><script>var $cdnPrefix="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master";</script><script type=text/javascript src=/js/custom.js></script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?6f278ed0fdb01edb3b1e7398379e5432";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script></body></html>